<template>
  <!-- 页面容器 -->
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <header class="header">用户注册</header>

    <!-- 主要内容区域 -->
    <div class="pb-20">
      <!-- 注册表单 -->
      <div class="p-6">
        <div class="space-y-6">
          <!-- 手机号码输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              手机号码：
            </label>
            <input
                v-model="registerForm.phone"
                type="tel"
                placeholder="请输入手机号码"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>

          <!-- 密码输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              密码：
            </label>
            <input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>

          <!-- 确认密码输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              确认密码：
            </label>
            <input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>

          <!-- 用户姓名输入框 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              用户姓名：
            </label>
            <input
                v-model="registerForm.name"
                type="text"
                placeholder="请输入用户姓名"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-colors"
            >
          </div>

          <!-- 性别选择 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              性别：
            </label>
            <div class="flex items-center space-x-6">
              <label class="flex items-center cursor-pointer">
                <input
                    v-model="registerForm.gender"
                    type="radio"
                    value="male"
                    class="w-4 h-4 text-primary-500 border-gray-300 focus:ring-primary-500"
                >
                <span class="ml-2 text-gray-700">男</span>
              </label>
              <label class="flex items-center cursor-pointer">
                <input
                    v-model="registerForm.gender"
                    type="radio"
                    value="female"
                    class="w-4 h-4 text-primary-500 border-gray-300 focus:ring-primary-500"
                >
                <span class="ml-2 text-gray-700">女</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 注册按钮 -->
        <div class="mt-8">
          <button
              @click="handleRegister"
              class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium transition-colors"
          >
            注册
          </button>
        </div>

        <!-- 登录链接 -->
        <div class="mt-4 text-center">
          <span class="text-gray-600">已有账号？</span>
          <button
              @click="goToLogin"
              class="text-primary-500 hover:text-primary-600 font-medium ml-1"
          >
            立即登录
          </button>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

// 初始化路由实例
const router = useRouter()

// 注册表单数据
const registerForm = ref({
  phone: '',          // 手机号码
  password: '',       // 密码
  confirmPassword: '', // 确认密码
  name: '',           // 用户姓名
  gender: 'male'      // 性别，默认为男性
})

/**
 * 处理注册逻辑
 */
const handleRegister = () => {
  // 基础表单验证
  if (!registerForm.value.phone || !registerForm.value.password ||
      !registerForm.value.confirmPassword || !registerForm.value.name) {
    alert('请填写完整的注册信息')
    return
  }

  // 验证两次密码是否一致
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }

  // 验证手机号码长度
  if (registerForm.value.phone.length !== 11) {
    alert('请输入正确的手机号码')
    return
  }

  // 验证密码长度
  if (registerForm.value.password.length < 6) {
    alert('密码长度不能少于6位')
    return
  }

  // 实际应用中这里会调用注册API
  alert('注册成功！')

  // 注册成功后跳转到登录页
  router.push('/login')
}

/**
 * 跳转到登录页面
 */
const goToLogin = () => {
  router.push('/login')
}
</script>